<template>
	<view class="range-index">
		<view class="range-index-l">
			<view>line width</view>
			<view>
				<view>value is: </view>
				<view>{{ crshi * 2 }}</view>
				<view>{{ crshi1 * 2 }}</view>
			</view>
		</view>
		<view class="range-index-r">
			<view 
				class="range-box-block" 
				@touchstart="touchStart" 
				@touchmove="touchmove" 
				@touchend="touchend"
				:style="{ 'left': `${ crshi * 2 }%` }"
			></view>
			
			<view
				class="range-box-block" 
				style="background-color: red;"
				@touchstart="touchStart1"
				@touchmove="touchmove1" 
				@touchend="touchend1"
				:style="{ 'left': `${ crshi1 * 2  }%` }"
			></view>
			
			<view class="range-box-bar">
				<!-- 单向 -->
				<!-- <view class="range-box-active" :style="{ 'width': `${ crshi * 4  }%` }"></view> -->
				
				<!-- 双向 -->
				<view class="range-box-bidirectional" :style="{ 'left': `${ crshi * 2 }%`, 'width': `${  crshi1 * 2 - crshi * 2 }%` }"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref,reactive,getCurrentInstance,onMounted,watch, nextTick,computed } from 'vue'
const instance = getCurrentInstance();

//初始的x,y
const inceptionPosition = reactive({
	x: 0,
	y: 0,
})
const domData = ref(0);
const blockLeft = ref(0);
const diff = ref(0);
const isDragging = ref(false);

//第一个滑块
const touchStart = (e) => {
	Object.assign(inceptionPosition,{ x: e.touches[0].clientX, y: e.touches[0].clientY });
	isDragging.value = true;
}
const touchmove = (e) => {
	if(isDragging.value && !isDragging1.value){
		console.log("测试")
		let diffValue = e.touches[0].clientX - inceptionPosition.x;
		diff.value = diffValue;
	}
}
const touchend = (e) => {
	isDragging.value = false;
	let result = blockLeft.value + diff.value;
	blockLeft.value = result > domData.value ? domData.value : result < 0 ? 0 : result;
	nextTick(()=>{
		diff.value = 0;
	})
}

//第二个滑块
const inceptionPosition1 = reactive({
	x: 0,
	y: 0,
});
const blockLeft1 = ref(0);
const diff1 = ref(0);
const isDragging1 = ref(false);
const touchStart1 = (e) => {
	Object.assign(inceptionPosition1,{ x: e.touches[0].clientX, y: e.touches[0].clientY });
	isDragging1.value = true;
}
const touchmove1 = (e) => {
	if(isDragging1.value && !isDragging.value){
		let diffValue = e.touches[0].clientX - inceptionPosition1.x;
		diff1.value = diffValue;
	}
}
const touchend1 = (e) => {
	isDragging1.value = false;
	let result = blockLeft1.value + diff1.value;
	blockLeft1.value = result > domData.value ? domData.value : result < 0 ? 0 : result;
	nextTick(()=>{
		diff1.value = 0;
	})
}

const crshi1 = computed(()=>{
	let result = Math.floor((blockLeft1.value + diff1.value) / domData.value * 100);
	// let ceshi = result > 100 ? 100 : result < 0 ? 0 : result;
	let min = Math.floor((blockLeft.value) / domData.value * 100);
	let ceshi11 = result > 100 ? 100 : result > min ? result : min;
	// console.log(Math.floor(ceshi / 4));
	return Math.floor(ceshi11 / 2);
})


const crshi = computed(()=>{
	let result = Math.floor((blockLeft.value + diff.value) / domData.value * 100);
	// let ceshi = result > 100 ? 100 : result < 0 ? 0 : result;
	let max = Math.floor((blockLeft1.value) / domData.value * 100);
	let ceshi333 = result > max ? max : result < 0 ? 0 : result;
	return Math.floor(ceshi333 / 2);
})

onMounted(()=>{
	uni.createSelectorQuery().in(instance.proxy)
	  .select(".range-box-bar")
	  .boundingClientRect((data) => {
			domData.value = data.width;
			nextTick(()=>{
				blockLeft1.value = data.width;
			})
	  })
	  .exec();
	  
	  
	  
	  const systemInfo = uni.getSystemInfoSync();
	  console.log(systemInfo.windowWidth);
})
</script>

<style lang="scss">
.range-index {
	display: flex;
	gap: 20rpx;
	.range-index-l {
		width: 180rpx;
	}
	.range-index-r {
		width: 300rpx;
		height: 50rpx;
		position: relative;
		.range-box-bar {
			position: absolute;
			height: 15rpx;
			background-color: #ccc;
			width: 100%;
			top: 50%;
			border-radius: 10rpx;
			transform: translateY(-50%);
			z-index: -1;
			overflow: hidden;
			.range-box-active {
				height: 100%;
				background-color: orange;
			}
			.range-box-bidirectional {
				position: absolute;
				height: 100%;
				background-color: orange;
				z-index: 1;
			}
		}
		.range-box-block {
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			background-color: #fff;
			box-shadow: 0 0 10rpx 2rpx #ccc;
			box-sizing: border-box;
			border-radius: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
		}
	}
	
}
</style>